<template>
  <div class="bottom-bar">
    <div class="check-content">
      <check-button :isChecked="isSelectAll" class="check-button" @click.native="checkedClick"></check-button>
      <span>全选</span>
    </div>
    <div class="totalPrice">合计：{{ totalPrice }}</div>
    <div class="calculate">去计算({{ checkedLength }})</div>
  </div>
</template>

<script>
import CheckButton from "components/content/checkButton/CheckButton";
import { mapGetters } from "vuex";
export default {
  name: "CartBottomBar",
  components: {
    CheckButton,
  },
  computed: {
    ...mapGetters(["cartList"]),
    // 合计通过过滤出选中的之后在汇总
    totalPrice() {
      //过滤出来直接返回选中的状态商品
      return this.cartList
        .filter((item) => {
          return item.checked;
        })
        .reduce((parValue, item) => {
          return parValue + item.price * itme.count;
        }, 0)
        .toFixed(2);
      /*过滤完成后 就通过reduce汇总 参数1  前一个值 一个是数据源  参数是一个箭头函数 , 0是初始化值 通过返回 前一次 + price 属性  * item.count  价格* 数量 最后一次的当成*/
    },
    //计算选中的长度
    checkedLength() {
      // 直接过滤出选中的长度返回
      return this.cartList.filter((item) => item.checked).length;
    },
    //就是用来判断是否全选
    isSelectAll() {
      // filter是选择没选中的 并且有长度的话 返回一个数组  不选中的 数字能取反吗 可以取反的先找有没有不被选中的 如果有 到时候就数组就有长度就说明是有的就是ture 之后在取反 就返回false了 这个计算属性为false
      // return !this.$store.state.cartList.filter(item => !item.checked).length
      // 没有找到数据 那就是空 undefind 之后在取反 就得到了true 所以要加上一个判断 fasle
      if (this.$store.state.cartList.length === 0) return false;

      return !this.$store.state.cartList.find((item) => !item.checked);
     /* 上一个会遍历完 性能不高 而是通过find函数 找函数找到一个就方法 停止掉了  也是查不选中的  找到后也是要取反  找到这个的话就有一个不选中 就返回true 在取反 之后返回给计算属性 这个时候变成了false了  逻辑是一样的 如果一个都没有 都选中了 那就是true*/
    },
  },
  methods: {
    checkedClick() {
      // 全部选中
      if (this.isSelectAll) {
        this.$store.state.cartList.forEach((item) => {
          item.checked = false;
        });
      } else {
        // 部分或全部不选中
        this.$store.state.cartList.forEach((item) => {
          item.checked = true;
        });
      }
    },
  },
};
</script>

<style scoped>
.bottom-bar {
  position: relative;
  display: flex;
  height: 40px;
  line-height: 40px;
  background-color: #fbfbfb;
  font-size: 14px;
}
.check-content {
  display: flex;
  align-items: center;
  width: 70px;
}
.check-button {
  width: 22px;
  height: 22px;
  line-height: 20px;
  margin: 5px;
}
.totalPrice {
  margin-left: 20px;
  flex: 1;
}
.calculate {
  width: 90px;
  color: #ffffff;
  text-align: center;
  background-color: #d43729;
}
</style>
